<script setup lang="ts">

const content = defineModel('modelValue');

const contentCopy = ref(content.value);
const emits = defineEmits(["update"]);
const props = defineProps({
  type: {
    type: String,
    default: "text" //text 文本类型    numText 数字文本    select 选择框   option 单选框
  },
  typeOption: {
    type: Array
  },
  canEdit: {
    type: Boolean,
    default: true
  }
})

const edit = ref(false)

function doEdit() {
  content.value = contentCopy.value;
  emits("update", content.value);
  edit.value = false;
}

function cancel() {
  edit.value = false;
  contentCopy.value = content.value;
}

function getTypeOptionValue() {
  if (props.typeOption?.length) {
    for (let i = 0; i < props.typeOption.length; i++) {
      let value = props.typeOption[i].value;
      let label = props.typeOption[i].label;
      if (value == content.value) {
        return label;
      }
    }
  }
  return "";
}
</script>

<template>
  <div class="form-item-box">
    <div class="type-box">
      <div class="content-box" v-if="!edit">
        <div class="content">
          <span v-if="type === 'text' || type === 'numText'">
              <span class="none" v-if='content === null || content == ""|| content === undefined'>
                未设置
              </span>
              <span v-else>
                {{ content }}
              </span>
          </span>
          <span v-else-if="type === 'option' || type === 'select'">
            <span class="none" v-if='getTypeOptionValue() === null || getTypeOptionValue() == ""|| getTypeOptionValue() === undefined'>
                未选择
              </span>
            <span v-else>
                {{ getTypeOptionValue() }}
              </span>
          </span>
        </div>
        <div v-if="canEdit" class="edit-button" @click="edit = true">
          <span class="iconfont icon-bianji" style="padding: 0 .2rem"/>编 辑
        </div>
      </div>
      <div class="edit-box" v-else>
        <div class="edit-input-box" v-if="type === 'text'">
          <el-input v-model="contentCopy"/>
        </div>
        <div class="edit-input-box" v-else-if="type === 'numText'">
          <el-input v-model="contentCopy" type="number" clearable/>
        </div>
        <div class="edit-input-box" v-else-if="type === 'select'">
          <el-input v-model="contentCopy" clearable/>
        </div>
        <div class="edit-input-box" v-else-if="type === 'option'">
          <el-radio-group v-model="contentCopy">
            <el-radio v-for="(item,index) in typeOption" :key="index" :value="item.value">{{ item.label }}</el-radio>
          </el-radio-group>
        </div>
        <div class="edit-input-button-box">
          <el-button type="success" size="small" @click="doEdit">确 认</el-button>
          <el-button type="danger" size="small" @click="cancel">取 消</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.form-item-box {

  .type-box {
    min-width: 3rem;

    .content-box {
      display: flex;
      align-items: center;

      .content {
        padding: 0 1rem;

        .none {
          color: #D4D7DE;
        }
      }

      .edit-button {
        display: none;
        color: #0fd7ff;
        cursor: pointer;
        user-select: none;
      }
    }

    .edit-box {
      display: flex;
      align-items: center;
      user-select: none;


      .edit-input-button-box {
        padding: 0 1rem;
        display: flex;
      }
    }
  }

  .type-box:hover {
    .edit-button {
      display: flex;
    }
  }
}
</style>